<template>
  <!-- form:{{ form }} -->

  <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="auto">
    <el-form-item label="护理项目编号">
      <el-input readonly v-model="form.serialNumber" />
    </el-form-item>
    <el-form-item label="护理项目名称">
      <el-input readonly v-model="form.nursingName" />
    </el-form-item>
    <el-form-item label="客户">
      <el-input readonly v-model="form.customerName" />
    </el-form-item>
    <el-form-item label="数量">
      <el-input v-model="form.nurseNumber" />
    </el-form-item>
    <el-form-item label="服务购买时间" type="datetime">
      <el-date-picker
        type="datetime"
        placeholder="请选择时间"
        v-model="form.buyTime"
        format="YYYY-MM-DD HH:mm:ss"
        value-format="YYYY-MM-DD HH:mm:ss"
      />
    </el-form-item>
    <el-form-item label="服务到期时间" type="datetime">
      <el-date-picker
        type="datetime"
        placeholder="请选择时间"
        v-model="form.maturityTime"
        format="YYYY-MM-DD HH:mm:ss"
        value-format="YYYY-MM-DD HH:mm:ss"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">保存</el-button>
      <el-button @click="cancleEdit">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup name="edit">
import { ref, reactive, toRef } from "vue";
import { saveOrUpdateInfo, getById } from "@/api/CareManagement/careProject/index";
import { updateadd } from "@/api/CareManagement/careSetup/index.js";
import { ElMessageBox, ElNotification } from "element-plus";
import { onMounted } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();

const { editId, closeaddEdit } = defineProps(["editId", "closeaddEdit"]);

let query = toRef(route, "query");

// 表单信息
const form = ref({
  itemId: "",
  nursingName: "",
  serialNumber: "",
  customerName: query.value.customerName,
  customerId: query.value.customerId,
});
// 保存按钮点击事件
const onSubmit = () => {
  // console.log('submit!')
  updateadd(form.value).then((success) => {
    ElNotification({
      title: "消息",
      type: "success",
      message: "保存成功",
    });
    closeaddEdit(true);
  });
};

// 点击取消按钮
const cancleEdit = () => {
  closeaddEdit(false);
};

// 当修改操作的到时候 根据主键查询 通过调用getById函数来获取指定editId的用户数据 并将相关数据填充到表单中
const pageGetById = async () => {
  try {
    // 异步调用getById函数获取用户数据
    const data = await getById(editId);

    const { id, nursingName, serialNumber } = data;

    form.value.itemId = id;
    form.value.customerName = query.value.customerName;
    form.value.customerId = query.value.customerId;
    form.value.nursingName = nursingName;
    form.value.serialNumber = serialNumber;
  } catch (error) {
    console.error("获取数据失败:", error);
  }
};
//  function pageGetById() {
//     getById(editId).then(user => {
//         form.value = user
//     })
// }

onMounted(() => {
  // 如果获取到editId，则代表修改用户信息
  if (editId) {
    pageGetById();
  } else {
    // alert("create ")
    form.value.isDeleted = 0;
  }
});
</script>

<style scoped>
.demo-form-inline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 15px 5px;
}

.demo-form-inline .el-input {
  --el-input-width: 220px;
}

/* .demo-form-inline .el-date-picker {
    --width: 10px;
  } */

/* .demo-form-inline .el-select {
    --el-select-width: 100px;
  } */
</style>
